﻿@page
@{ Layout = "_Layout"; }
@section Styles{
<style>
    .commands div {
        display: inline-block;
        width: auto;
    }

    .el-upload, .el-upload-dragger {
        display: inline-block;
        width: 100%;
    }

    .el-icon-arrow-down {
        font-size: 12px;
    }

    .el-icon-picture-outline {
        font-size: 22px;
        margin: 80px 0;
        color: #c0c4cc;
    }

    .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
        margin: 0;
    }
</style>
}
<el-card>
    <div slot="header" class="clearfix">
        <span>证件照上传</span>
        <el-button style="float: right;padding:3px 0;" type="text" v-on:click="utils.closeLayerSelf"><i class="el-icon-close"></i></el-button>
    </div>
    <el-scrollbar class="scrollbar" :style="{ height: ($(window).innerHeight()-180) + 'px' }">
        <div style="margin-right:18px;">
            <el-tabs v-model="activeName" tab-position="left">
                <el-tab-pane label="选择证件照" name="select">
                        <el-upload ref="uploadFiles"
                                   :action="$urlUpload"
                                   :headers="{Authorization: 'Bearer ' + $token}"
                                   :before-upload="uploadBefore"
                                   :on-change="uploadChange"
                                   :on-progress="uploadProgress"
                                   :on-success="uploadSuccess"
                                   :on-error="uploadError"
                                   :on-exceed="uploadExceed"
                                   :multiple="true" :destroy-on-close="true"
                                   :auto-upload="false" :show-file-list="false"
                                   :data="uploadParams" drag>
                            <i class="el-icon-upload"></i>
                            <div class="el-upload__text">将图片拖到此处，或<em>点击上传</em></div>
                            <div class="el-upload__tip" slot="tip">仅支持图片格式，且单个文件大小不超过2G。</div>
                            <div class="el-upload__tip" slot="tip"><span style="color:red;">命名规则：图片名称为用户登录系统账号，例：zhangsan.jpg,lisi.png</span></div>
                        </el-upload>
                </el-tab-pane>
                <el-tab-pane name="upload">
                    <span slot="label">
                        <span v-if="fileList.length>0">文件上传<span style="color:green;margin-left:3px;">（{{fileList.length}}）</span></span>
                        <span v-else>文件上传</span>
                    </span>
                        <el-button plain icon="el-icon-upload" size="small" type="primary" :loading="uploadBtnLoad" v-on:click="uploadFiles"  v-if="fileList.length>0">开始上传</el-button>
                        <el-divider></el-divider>
                        <el-table :data="fileList"
                                  style="width: 100%" size="mini">
                            <el-table-column prop="name" label="文件">
                            </el-table-column>
                            <el-table-column prop="size" label="大小" width="100">
                                <template slot-scope="scope">
                                    <span>{{ utils.formatFileSize(scope.row.size) }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="status" label="状态" width="110">
                                <template slot-scope="scope">
                                    <el-tag size="mini" v-if="scope.row.status==='ready'" effect="dark" type="info">准备上传</el-tag>
                                    <el-tag size="mini" v-else-if="scope.row.status==='success'" effect="dark" type="success">上传成功</el-tag>
                                    <el-tag size="mini" v-else-if="scope.row.status==='fail'" effect="dark" type="danger">上传失败</el-tag>
                                    <span v-else><i class="el-icon-loading"></i></span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="percentage" label="进度" width="218" align="right">
                                <template slot-scope="scope">
                                    <el-progress status="success" :percentage="scope.row.percentage" :stroke-width="18"></el-progress>
                                </template>
                            </el-table-column>
                            <el-table-column width="110">
                                <template slot-scope="scope">
                                    <el-button size="mini" v-on:click="btnFileAbort(scope.row)">取消上传</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                </el-tab-pane>
                <el-tab-pane label="上传成功" name="success">
                    <span slot="label">
                        <span v-if="fileListYes.length>0">上传成功<span style="color:green;margin-left:3px;">（{{fileListYes.length}}）</span></span>
                        <span v-else>上传成功</span>
                    </span>
                        <el-table :data="fileListYes"
                                  style="width: 100%" size="mini">
                            <el-table-column prop="name" label="文件">
                            </el-table-column>
                            <el-table-column prop="size" label="大小" width="100" align="right">
                                <template slot-scope="scope">
                                    <span>{{ utils.formatFileSize(scope.row.size) }}</span>
                                </template>
                            </el-table-column>
                        </el-table>
                </el-tab-pane>
                <el-tab-pane :label="'上传错误（'+fileListNo.length+'）'" name="error">
                    <span slot="label">
                        <span v-if="fileListNo.length>0">上传错误<span style="color:red;margin-left:3px;">（{{fileListNo.length}}）</span></span>
                        <span v-else>上传错误</span>
                    </span>
                        <el-table :data="fileListNo"
                                  style="width: 100%" size="mini">
                            <el-table-column prop="name" label="文件">
                            </el-table-column>
                            <el-table-column prop="msg" width="380" align="right">
                                <template slot-scope="scope">
                                    <el-tag size="mini" effect="dark" type="danger">{{scope.row.msg}}</el-tag>
                                </template>
                            </el-table-column>
                        </el-table>
                </el-tab-pane>
            </el-tabs>
        </div>
    </el-scrollbar>
</el-card>
<el-row align="center" style="margin-top:18px;">
    <el-col :span="24" align="center">
        <el-button :size="euiSize" v-on:click="utils.closeLayerSelf" icon="el-icon-back">返 回</el-button>
    </el-col>
</el-row>
@section Scripts{
    <script src="/sitefiles/assets/js/admin/settings/usersCerAvatarUpload.js" type="text/javascript"></script>
 }
